
<head>
    <meta charset="UTF-8">
    <title>Server Manage</title>
    <style>
        UIKitCss
    </style>
    <style>
        ul {list-style: none;}
        li {list-style: none;}
        .uk-list label {font-size: large;}
    </style>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>-->
    <!-- UIkit JS -->
<!--    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>-->
    <script>
        UIKitJs;
        uiKitIconsJs;
        MetricFlowJs;
        jQueryJs;
        var graph;
        var d = 180;
        var globalThreshold = globalThresholdValue;
        var globalNeedLogin = globalNeedLoginValue;
        var globalToken = sessionStorage.getItem("kotimeToken")
        $(document).ready(function () {
            let globalIsLogin = false;
            $.ajaxSettings.async = false;

            $.get('contextPath/api/getStatistic?token='+globalToken, function (result) {
                let data = result.data
                let totalNum = data['totalNum'];
                let systemTotalNum = document.getElementById("systemTotalNum");
                systemTotalNum.innerHTML=systemTotalNum.innerHTML+"<br>"+totalNum;

                let normalNum = data['normalNum'];
                let systemNormalNum = document.getElementById("systemNormalNum");
                systemNormalNum.innerHTML=systemNormalNum.innerHTML+"<br>"+normalNum;

                let delayNum = data['delayNum'];
                let systemDelayNum = document.getElementById("systemDelayNum");
                systemDelayNum.innerHTML=systemDelayNum.innerHTML+"<br>"+delayNum;
                if (delayNum>0) {
                    systemDelayNum.className+=' uk-label-danger';
                };
                let avgRunTime = data['avgRunTime'];
                let systemAvgRunTime = document.getElementById("systemAvgRunTime");
                systemAvgRunTime.innerHTML=systemAvgRunTime.innerHTML+"<br>"+avgRunTime;
                if (avgRunTime>globalThreshold) {
                    systemAvgRunTime.className+=' uk-label-danger';
                };

                let maxRunTime = data['maxRunTime'];
                let systemMaxRunTime = document.getElementById("systemMaxRunTime");
                systemMaxRunTime.innerHTML=systemMaxRunTime.innerHTML+"<br>"+maxRunTime;
                if (maxRunTime>globalThreshold) {
                    systemMaxRunTime.className+=' uk-label-danger';
                };

                let minRunTime = data['minRunTime'];
                let systemMinRunTime = document.getElementById("systemMinRunTime");
                systemMinRunTime.innerHTML=systemMinRunTime.innerHTML+"<br>"+minRunTime;
                if (minRunTime>globalThreshold) {
                    systemMinRunTime.className+=' uk-label-danger';
                };

            });
            $.ajaxSettings.async = false;
            let searchText = $("#searchText").val();
            // $.get('contextPath/koTime/getExceptions?token='+globalToken, function (data) {
            //     let element = document.getElementById('exceptionList');
            //     html = '';
            //     for (let i = 0; i < data.length; i++) {
            //         let id = data[i]['id'];
            //         let className = data[i]['className'];
            //         let message = data[i]['message'];
            //         html += "<li onclick=\"showExceptions('"+id+"','"+message+"')\" style='' id=\""+id+"\"><span style='font-size: 16px;font-weight: 500;'>"+className+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-danger\">"+message+"</span></li>";
            //     };
            //     element.innerHTML = html;
            // });

            //====================================================================================================
            $.get('contextPath/server/cpu?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let serverCpuDiv = document.getElementById("serverCpuDiv");
                html += itemCreate('系统占用率(%)',data.systemLoad);
                html += itemCreate('内核利用率(%)',data.sysRate);
                html += itemCreate('用户使用率(%)',data.userRate);
                html += itemCreate('读写等待(%)',data.waitRate);
                html += itemCreate('逻辑处理器',data.logicalNum);
                serverCpuDiv.innerHTML = html;
            });
            $.get('contextPath/server/thread?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let serverThreadDiv = document.getElementById("serverThreadDiv");
                html += itemCreate('就绪线程',data.runnableCount);
                html += itemCreate('等待线程',data.waitingCount);
                html += itemCreate('阻塞线程',data.blockedCount);
                html += itemCreate('活动线程',data.daemonThreadCount);
                html += itemCreate('守护线程',data.threadCount);
                html += itemCreate('新加入',data.newCount);
                html += itemCreate('最大峰值',data.peakThreadCount);
                html += itemCreate('终止线程',data.terminatedCount);
                html += itemCreate('计时等待',data.timedWaitingCount);
                serverThreadDiv.innerHTML = html;
            });
            $.get('contextPath/server/physicalMemory?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let physicalMemoryDiv = document.getElementById("physicalMemoryDiv");
                html += itemCreate('总容量(GB)',data.initValue);
                html += itemCreate('已用(GB)',data.usedValue);
                html += itemCreate('剩余(GB)',data.freeValue);
                html += itemCreate('使用率(%)',data.usedRate);
                physicalMemoryDiv.innerHTML = html;
            });
            $.get('contextPath/server/heapMemory?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let heapMemoryDiv = document.getElementById("heapMemoryDiv");
                html += itemCreate('最大容量(GB)',data.maxValue);
                html += itemCreate('初始容量(GB)',data.initValue);
                html += itemCreate('已用(GB)',data.usedValue);
                html += itemCreate('使用率(%)',data.usedRate);
                heapMemoryDiv.innerHTML = html;
            });
            $.get('contextPath/api/queryByClass?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let classStatisticDiv = document.getElementById("classStatisticDiv");
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    let className = apiItem.className;
                    let classSimpleName = apiItem.classSimpleName;
                    let apiSize = apiItem.apiSize;
                    html += "<div>";
                    html += "<div style=\"border-radius: 10px;\" class=\"uk-card uk-card-small uk-card-default uk-card-body uk-label-success\"><span style=\"font-size: 20px;\">" + classSimpleName + "<br>"+ apiSize +"</span></div>";
                    html += "</div>";
                }
                classStatisticDiv.innerHTML = html;
            });

            let searchTextApi2 = $("#searchTextApi").val();
            let searchText2 = '';
            $.get('/api/query?question='+searchText2+'&token='+globalToken, function (result) {
                // let element = document.getElementById('apiList');
                let element = document.getElementById('apiInterfacebody');
                html = '';
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    let color = globalThreshold -1 > globalThreshold ? 'danger':'success';
                    let apiId = apiItem.id;
                    let className = apiItem.className;
                    let methodName = apiItem.methodName;
                    let requestMethodDesc = apiItem.requestMethodDesc;
                    let url = apiItem.patterns[0];
                    let apiVersionEnable = apiItem.apiVersionEnable;
                    let apiListenerEnable = apiItem.apiListenerEnable;
                    let apiEncryptEnable = apiItem.apiEncryptEnable;
                    let apiDecryptEnable = apiItem.apiDecryptEnable;
                    let apiSensitiveEnable = apiItem.apiSensitiveEnable;
                    // html += "<li onclick=\"showTraceMethods('"+apiId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                    // html += "<li style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ url+"#"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span><button onclick=\"apiStart("+apiId+")\">开启</button><button onclick=\"apiShutdown("+apiId+")\">关闭</button></li>";
                    // }
                    html += "<tr>";
                    html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                    html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                    html += "<td class=\"uk-table-link\">";
                    html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                    html += "</td>";
                    html += "<td class=\"uk-text-nowrap\">"+requestMethodDesc+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+className+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+methodName+"</td>";

                    html += "<td class=\"uk-text-nowrap\">"+apiVersionEnable+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+apiListenerEnable+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+apiEncryptEnable+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+apiDecryptEnable+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+apiSensitiveEnable+"</td>";

                    html += "<td class=\"uk-text-nowrap\">";
                    html += "<p uk-margin>";
                    html += "<button class=\"uk-button uk-button-default uk-margin-small-right\" type=\"button\" uk-toggle=\"target: #modal-example\">编辑</button>";
                    html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"apiStart('"+apiId+"')\">开启</button>";
                    html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                    html += "</p>";
                    html += "</td>";
                    html += "</tr>";
                };
                element.innerHTML = html;
            });

            let searchTextApi = $("#searchTextApi").val();
            // let searchText2 = '';
            $.get('/view/asm/config?question='+searchText2+'&token='+globalToken, function (result) {
                // let element = document.getElementById('apiList');
                let element = document.getElementById('apiTbody');
                html = '';
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    // alert(traceId);
                    let  color = globalThreshold -1 > globalThreshold?'danger':'success';
                    // if (methodType=='Controller' && routeName!=null && routeName!='') {
                    //     html += "<li onclick=\"showMethods('"+traceId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp(<span style='font-size: 14px;font-weight: 430;color:#032b11'>"+routeName+"</span>)&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                    // }else{
                    //     html += "<li onclick=\"showMethods('"+traceId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                    // let avgRunTime = 0;
                    // let apiId = apiItem.id;
                    let modelClassName = apiItem.modelClassName;
                    let modelClassSimpleName = apiItem.modelClassSimpleName;
                    let packageName = apiItem.packageName;
                    let beanClassSimpleName = apiItem.beanClassSimpleName;
                    let beanClassName = apiItem.beanClassName;
                    let type = apiItem.type;
                    let enable = apiItem.enable;
                    let url = '';
                    let apiId = '';
                    // html += "<li onclick=\"showTraceMethods('"+apiId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                    // html += "<li style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ url+"#"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span><button onclick=\"apiStart("+apiId+")\">开启</button><button onclick=\"apiShutdown("+apiId+")\">关闭</button></li>";
                    // }
                    if(enable){
                        // html += "<tr style=\"background-color:#66f471\">";
                        html += "<tr>";
                    } else {
                        html += "<tr style=\"background-color:#CCCCCC\">";
                    }
                    // html += "<tr>";
                    html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                    html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                    html += "<td class=\"uk-table-link\">";
                    html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                    html += "</td>";
                    html += "<td class=\"uk-text-nowrap\">"+modelClassName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+modelClassSimpleName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+packageName+"</td>";
                    // html += "<td class=\"uk-text-nowrap\">"+beanClassName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+beanClassSimpleName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+type+"</td>";
                    html += "<td class=\"uk-text-nowrap\">";
                    html += "<p uk-margin>";
                    // html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"apiStart('"+apiId+"')\">开启</button>";
                    // html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                    html += "</p>";
                    html += "</td>";
                    html += "</tr>";
                };
                element.innerHTML = html;
            });

            $.get('/view/roleRedis/config?question='+searchText2+'&token='+globalToken, function (result) {
                // let element = document.getElementById('apiList');
                let element = document.getElementById('apiRedisbody');
                html = '';
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    let  color = globalThreshold -1 > globalThreshold?'danger':'success';
                    // if (methodType=='Controller' && routeName!=null && routeName!='') {
                    //     html += "<li onclick=\"showMethods('"+traceId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp(<span style='font-size: 14px;font-weight: 430;color:#032b11'>"+routeName+"</span>)&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                    // }else{
                    //     html += "<li onclick=\"showMethods('"+traceId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                    // let avgRunTime = 0;
                    let keyId = apiItem.key;
                    let modelClassName = apiItem.modelClassName;
                    let modelClassSimpleName = apiItem.modelClassSimpleName;
                    let timeout = apiItem.timeout;
                    let timeoutValue = apiItem.value;
                    let timeUnit = apiItem.timeUnit;

                    let connectionExceptionPrintStackTrace = apiItem.connectionExceptionPrintStackTrace;
                    let connectionExceptionThrow = apiItem.connectionExceptionThrow;
                    let exceptionPrintStackTrace = apiItem.exceptionPrintStackTrace;
                    let exceptionThrow = apiItem.exceptionThrow;
                    let url = '';
                    // if(enable){
                    //     // html += "<tr style=\"background-color:#66f471\">";
                    //     html += "<tr>";
                    // } else {
                    //     html += "<tr style=\"background-color:#CCCCCC\">";
                    // }
                    html += "<tr>";
                    html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                    html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                    html += "<td class=\"uk-table-link\">";
                    html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                    html += "</td>";
                    html += "<td class=\"uk-text-nowrap\">"+modelClassName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+modelClassSimpleName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+timeout+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+timeoutValue+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+timeUnit+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+connectionExceptionPrintStackTrace+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+connectionExceptionThrow+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+exceptionPrintStackTrace+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+exceptionThrow+"</td>";

                    html += "<td class=\"uk-text-nowrap\">";
                    html += "<p uk-margin>";
                    // html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"apiStart('"+apiId+"')\">开启</button>";
                    // html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                    html += "</p>";
                    html += "</td>";
                    html += "</tr>";
                };
                element.innerHTML = html;
            });

            $.get('/view/model/config?question='+searchText2+'&token='+globalToken, function (result) {
                let element = document.getElementById('apiModelbody');
                html = '';
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    let color = globalThreshold -1 > globalThreshold?'danger':'success';
                    let id = apiItem.id;
                    let modelClassName = apiItem.modelClassName;
                    let modelClassSimpleName = apiItem.modelClassSimpleName;
                    let batchSize = apiItem.batchSize;
                    let modelPropertiesSize = apiItem.modelProperties.length;

                    let url = '';
                    html += "<tr>";
                    html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                    html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                    html += "<td class=\"uk-table-link\">";
                    html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                    html += "</td>";
                    html += "<td class=\"uk-text-nowrap\">"+modelClassName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+modelClassSimpleName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+batchSize+"</td>";
                    html += "<td class=\"uk-text-nowrap\">";
                    html += "<p uk-margin>";
                    html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"showModelProperties("+ JSON.stringify(apiItem.modelProperties).replace(/\"/g, "'")+")\" uk-toggle=\"target: #modal-example2\">属性("+modelPropertiesSize+")</button>";
                    // html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                    html += "</p>";
                    html += "</td>";
                    html += "</tr>";
                };
                element.innerHTML = html;
            });

            $.get('/env/beans?question='+searchText2+'&token='+globalToken, function (result) {
                let element = document.getElementById('beanBody');
                html = '';
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    let color = globalThreshold -1 > globalThreshold?'danger':'success';
                    let id = apiItem.id;
                    let beanName = apiItem.beanName;
                    let beanClassName = apiItem.beanClassName;
                    let modelClassSimpleName = "";
                    let autowireMode = apiItem.autowireMode;
                    // let modelPropertiesSize = apiItem.modelProperties.length;

                    let url = '';
                    html += "<tr>";
                    html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                    html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                    html += "<td class=\"uk-table-link\">";
                    html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                    html += "</td>";
                    html += "<td class=\"uk-text-nowrap\">"+beanName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+beanClassName+"</td>";
                    html += "<td class=\"uk-text-nowrap\">"+autowireMode+"</td>";
                    html += "<td class=\"uk-text-nowrap\">";
                    html += "<p uk-margin>";
                    // html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"showModelProperties("+ JSON.stringify(apiItem.modelProperties).replace(/\"/g, "'")+")\" uk-toggle=\"target: #modal-example2\">属性("+modelPropertiesSize+")</button>";
                    // html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                    html += "</p>";
                    html += "</td>";
                    html += "</tr>";
                };
                element.innerHTML = html;
            });

            $.ajaxSettings.async = true;
        });

        function itemCreate(name,size){
            let html = "<div>";
            html += "<div style=\"border-radius: 10px;\" class=\"uk-card uk-card-small uk-card-default uk-card-body uk-label-success\"><span style=\"font-size: 20px;\">" + name + "<br>"+ size +"</span></div>";
            html += "</div>";
            return html;
        }

        function formData(data) {
            if (data['avgRunTime']>globalThreshold) {
                data['style'] = {
                    'title-color':'#c71335',
                    'border-color':'#c71335',
                    'data-font-size':'10px',
                    'title-font-size':'12px'
                }
            }
            else{
                data['style'] = {
                    'title-color':'#375d46',
                    'border-color':'#375d46',
                    'data-font-size':'10px',
                    'title-font-size':'12px'
                }
            };
            data['title'] = {'name':data['name']};
            data['data'] = [
                {'name':'<span style="color:gray">类型：</span>'+data['methodType']},
                {'name':'<span style="color:gray">平均耗时：</span>'+data['avgRunTime']+' ms'},
                {'name':'<span style="color:gray">最大耗时：</span>'+data['maxRunTime']+' ms'},
                {'name':'<span style="color:gray">最小耗时：</span>'+data['minRunTime']+' ms'}
            ];
            if (data['exceptionNum']!=null && data['exceptionNum']>0) {
                data['data'].push({'name':'<span style="color:gray">异常数目：</span>'+data['exceptionNum']+' 个'});
            }
            data["dblclick"]="paramGraph";
            return data;
        };
        function apiStart(apiId) {
            let url = "contextPath/api/start?id=" + apiId + "&token="+globalToken;
            $.get(url, function (data) {
                // alert(JSON.stringify(data));
                let message = data.message;
                UIkit.notification({message: message, status: 'success'});
                // UIkit.notification({message: 'Warning message...', status: 'warning'});
            });
        };
        function apiShutdown(apiId) {
            let url = "contextPath/api/shutdown?id=" + apiId + "&token="+globalToken;
            $.get(url, function (data) {
                // alert(JSON.stringify(data));
                let message = data.message;
                UIkit.notification({message: message, status: 'success'});
            });
        };
        function apiShutdownAll() {
            $.get('contextPath/api/shutdownAll?token='+globalToken, function (data) {
                // alert(JSON.stringify(data));
                let message = data.message;
                UIkit.notification({message: message, status: 'success'});
            });
        };

        function sout() {
            var data = {};
            var wheres = new Array();
            $("#apiInterfacebody").empty();
            //$("#myForm").serializeArray()可以获取数组：name:"qwl",movieStar:"吴彦祖",movieStar:"彭于晏"。。。
            //.each()可以将里面的key和value遍历。这里的目的是将多选的movieStar:"吴彦祖",movieStar:"彭于晏"改为movieStarList:["吴彦祖","彭于晏"]
            $($("#testForm").serializeArray()).each(function () {
                let where = {};
                where['column'] = this.name;
                where['value'] = this.value;
                where['type'] = 'like';
                wheres.push(where);
            });
            data["wheres"] = wheres;
            console.log(data);
            let sad = JSON.stringify(data);
            $.ajax({
                url:'/api/searchPage',
                async:true,
                data: JSON.stringify(data),
                type:"post",
                contentType:"application/json;charset=UTF-8",
                success:function (result) {
                    // let element = document.getElementById('apiInterfacebody');
                    let html = '';
                    let data = result.data.records;
                    for (let i = 0; i < data.length; i++) {
                        let apiItem = data[i];
                        let color = globalThreshold -1 > globalThreshold ? 'danger':'success';
                        let apiId = apiItem.id;
                        let className = apiItem.className;
                        let methodName = apiItem.methodName;
                        let requestMethodDesc = apiItem.requestMethodDesc;
                        let url = apiItem.pattern;
                        let apiVersionEnable = apiItem.apiVersionEnable;
                        let apiListenerEnable = apiItem.apiListenerEnable;
                        let apiEncryptEnable = apiItem.apiEncryptEnable;
                        let apiDecryptEnable = apiItem.apiDecryptEnable;
                        let apiSensitiveEnable = apiItem.apiSensitiveEnable;
                        // html += "<li onclick=\"showTraceMethods('"+apiId+"')\" style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span></li>";
                        // html += "<li style='color: #333;font-weight: 400;font-size: 14px;' id=\""+apiId+"-list\">"+ url+"#"+ className+"#<span style='font-size: 16px;font-weight: 500;'>"+methodName+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-"+color+"\">平均响应 "+avgRunTime+" 毫秒</span><button onclick=\"apiStart("+apiId+")\">开启</button><button onclick=\"apiShutdown("+apiId+")\">关闭</button></li>";
                        // }
                        html += "<tr>";
                        html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                        html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                        html += "<td class=\"uk-table-link\">";
                        html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                        html += "</td>";
                        html += "<td class=\"uk-text-nowrap\">"+requestMethodDesc+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+className+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+methodName+"</td>";

                        html += "<td class=\"uk-text-nowrap\">"+apiVersionEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiListenerEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiEncryptEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiDecryptEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiSensitiveEnable+"</td>";

                        html += "<td class=\"uk-text-nowrap\">";
                        html += "<p uk-margin>";
                        html += "<button class=\"uk-button uk-button-default uk-margin-small-right\" type=\"button\" uk-toggle=\"target: #modal-example\">编辑</button>";
                        html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"apiStart('"+apiId+"')\">开启</button>";
                        html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                        html += "</p>";
                        html += "</td>";
                        html += "</tr>";
                    };
                    // element.innerHTML = html;
                    $("#apiInterfacebody").append(html);
                },
                error:function () {
                    // alert('服务问题，请求失败');
                    let message = '服务问题，请求失败';
                    UIkit.notification({message: message, status: 'success'});
                }
            });
        }

        function showModelProperties(modelProperties) {
            // let modelProperties = JSON.parse(modelPropertiesStr);
            if(modelProperties.length == 0){
                return;
            }
            let length = modelProperties.length;
            let element = document.getElementById('modelPropertyTableBody');
            let html = '';
            element.innerHTML = html;
            for (let i= 0; i < length; i++) {
                let modelProperty = modelProperties[i];
                let type = modelProperty.type;
                let name = modelProperty.name;
                let remark = modelProperty.remark;
                let url = '';
                html += "<tr>";
                html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                html += "<td class=\"uk-table-link\">";
                html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                html += "</td>";
                html += "<td class=\"uk-text-nowrap\">"+type+"</td>";
                html += "<td class=\"uk-text-nowrap\">"+name+"</td>";
                html += "<td class=\"uk-text-nowrap\">"+remark+"</td>";
                html += "</tr>";
            }
            element.innerHTML = html;
        };

        function apiInterfaceSearch() {
            var data = {};
            var movieStarList = new Array();
            //$("#myForm").serializeArray()可以获取数组：name:"qwl",movieStar:"吴彦祖",movieStar:"彭于晏"。。。
            //.each()可以将里面的key和value遍历。这里的目的是将多选的movieStar:"吴彦祖",movieStar:"彭于晏"改为movieStarList:["吴彦祖","彭于晏"]
            $($("#testForm").serializeArray()).each(function () {
                // if (this.name == "movieStar") {
                //     movieStarList.push(this.value);
                // } else {
                //    data[this.name] = this.value;
                // }
                data[this.name] = this.value;

            });
            data["movieStarList"] = movieStarList;
            // console.log(data);
            //提交到后台
            $.ajax({
                type: "POST",   //提交的方法
                url: "/api/query/search", //接口地址
                data: JSON.stringify(data),// 转化为json字符串--我公司是喜欢用post和json来接收的
                async: false,//false同步，true异步
                dataType:"json",
                contentType:"application/json",
                error: function (request) {  //失败
                    alert("Connection error");
                },
                success: function (data) {  //成功
                    alert(data);  //就将返回的数据显示出来
                }
            });
        }

    </script>
</head>
<body>


<nav class="uk-navbar-container" style="background-color: white" uk-navbar>
    <div class="uk-navbar-center">
        <div class="uk-grid-small" uk-grid>
            <div style="margin-top: 20px;font-size: 20px;" class="uk-width-expand" >配置中心</div>
        </div>
    </div>
</nav>

<ul class="uk-flex-center" uk-tab>
    <li id="zl" class="uk-active"><a href="#" >总览</a></li>
    <li id="jklb"><a href="#" >接口管理</a></li>
    <li id="jk2lb"><a href="#" >接口管理</a></li>
    <li id="jk3lb"><a href="#" >缓存管理</a></li>
    <li id="asm"><a href="#" >ASM管理</a></li>
    <li id="modellb"><a href="#" >业务模型管理</a></li>
    <li id="modellb2"><a href="#" >Bean管理</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li style="margin-left: 10%;margin-right: 10%;">
        <ul class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >接口统计</a></li>
        </ul>
        <div style="margin-top: 20px;" class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
            <div>
                <div id="systemTotalNum" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 20px;">接口数</span></div>
            </div>
            <div>
                <div id="systemDelayNum" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">延迟响应数</span></div>
            </div>
            <div>
                <div id="systemNormalNum" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">正常响应数</span></div>
            </div>
        </div>

        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >响应统计</a></li>
        </ul>
        <div style="margin-top: 10px;" class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
            <div>
                <div id="systemAvgRunTime" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">平均响应（ms）</span></div>
            </div>
            <div>
                <div id="systemMaxRunTime" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">最大响应（ms）</span></div>
            </div>
            <div>
                <div id="systemMinRunTime" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">最小响应（ms）</span></div>
            </div>
        </div>
        <div class="uk-alert-success" uk-alert>
            <a class="uk-alert-close" uk-close></a>
            <p id="apiTip">变更配置以后请重新刷新页面</p>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >处理器状态</a></li>
        </ul>
        <!--        <div style="margin-top: 10px;" class="uk-grid-column-small uk-grid-row-large uk-child-width-1-5@s uk-text-center" uk-grid>-->
        <div id="serverCpuDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-5@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >线程状态</a></li>
        </ul>
        <!--        <div style="margin-top: 10px;" class="uk-grid-column-small uk-grid-row-large uk-child-width-1-5@s uk-text-center" uk-grid>-->
        <div id="serverThreadDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >物理内存</a></li>
        </ul>
        <div id="physicalMemoryDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >应用内存</a></li>
        </ul>
        <div id="heapMemoryDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >接口定义</a></li>
        </ul>
<!--        <div style="margin-top: 10px;" class="uk-grid-column-small uk-grid-row-large uk-child-width-1-5@s uk-text-center" uk-grid>-->
        <div id="classStatisticDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
<!--            <div>-->
<!--                <div style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">平均响应（ms）</span></div>-->
<!--            </div>-->
        </div>
    </li>
    <li style="margin-left: 0%;margin-right: 0%;">
        <div class="uk-child-width-1-3@s uk-grid-collapse uk-text-center" uk-grid>
            <div>
                <div class="uk-tile uk-tile-default">
                    <p class="uk-h4">Default</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-muted">
                    <p class="uk-h4">Muted</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-primary">
                    <p class="uk-h4">Primary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-secondary">
                    <p class="uk-h4">Secondary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-primary">
                    <p class="uk-h4">Primary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-secondary">
                    <p class="uk-h4">Secondary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-secondary">
                    <p class="uk-h4">Secondary</p>
                </div>
            </div>
        </div>
        <div class="uk-section uk-section-default">
            <div class="uk-container">
                <h3>Section Default</h3>
                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="uk-section uk-section-muted">
            <div class="uk-container">
                <h3>Section Muted</h3>
                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-primary uk-light">
            <div class="uk-container">
                <h3>Section Primary</h3>
                <div class="uk-grid-match uk-child-width-1-5@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-secondary uk-light">
            <div class="uk-container">

                <h3>Section Secondary</h3>

                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section-default">
            <div class="uk-section uk-light uk-background-cover" style="background-image: url(http://v3.getuikit.work/skin/ukv3/images/dark.jpg)">
                <div class="uk-container">
                    <h3>Section with Images</h3>
                    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="uk-section-default">
            <div class="uk-section uk-light uk-background-cover" style="background-image: url(http://v3.getuikit.work/skin/ukv3/images/dark.jpg)">
                <div class="uk-container">

                    <h3>Section with Images</h3>

                    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                        <div>
<!--                            <div class="uk-child-width-1-2@s uk-grid-collapse uk-text-center" uk-grid>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-default">-->
<!--                                        <p class="uk-h4">总容量(GB)</p>-->
<!--                                        <p class="uk-h6">7.83</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-muted">-->
<!--                                        <p class="uk-h4">已用(GB)</p>-->
<!--                                        <p class="uk-h6">7.03</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-primary">-->
<!--                                        <p class="uk-h4">剩余(GB)</p>-->
<!--                                        <p class="uk-h6">0.86</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-secondary">-->
<!--                                        <p class="uk-h4">使用率(%)</p>-->
<!--                                        <p class="uk-h6">89.02</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                        <div>
                            <div class="uk-child-width-1-2@s uk-grid-collapse uk-text-center" uk-grid>
                                <div>
                                    <div class="uk-tile uk-tile-default">
<!--                                        <p class="uk-h4 ">总容量(GB)</p>-->
<!--                                        <p class="uk-h4 ">7.83</p>-->
                                        <span style="font-size: 20px;">总容量(GB)<br>7.83</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-tile uk-tile-muted">
<!--                                        <p class="uk-h4 ">已用(GB)</p>-->
<!--                                        <p class="uk-h4 ">7.03</p>-->
                                        <span style="font-size: 20px;">已用(GB)<br>7.03</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-tile uk-tile-primary">
<!--                                        <p class="uk-h4 ">剩余(GB)</p>-->
<!--                                        <p class="uk-h4 ">0.86</p>-->
                                        <span style="font-size: 20px;">剩余(GB)<br>0.86</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-tile uk-tile-secondary">
<!--                                          uk-margin-remove uk-padding-remove-->
<!--                                        <p class="uk-h4 "></p>-->
<!--                                        <p class="uk-h4 ">89.02</p>-->
                                        <span style="font-size: 20px;">使用率(%)<br>89.02</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <!--接口管理=================-->
    <li style="margin-left: 0%;margin-right: 0%;">
        <nav class="uk-navbar-container" uk-navbar>
            <form class="uk-search uk-search-navbar uk-search-large" style="width:100%;" onsubmit="return false;">
                <span uk-search-icon></span>
                <input class="uk-search-input" type="search" placeholder="Search..." id="apiInterfaceSearch">
            </form>
        </nav>
        <form id="testForm" class="uk-grid-small" uk-grid>
            <div class="uk-width-1-1">
                <div class="uk-margin" uk-margin>
                    <div uk-form-custom="target: > * > span:first-child">
                        <select>
                            <option value="">Please select...</option>
                            <option value="1">Option 01</option>
                            <option value="2">Option 02</option>
                            <option value="3">Option 03</option>
                            <option value="4">Option 04</option>
                        </select>
                        <button class="uk-button uk-button-default" type="button" tabindex="-1">
                            <span></span>
                            <span uk-icon="icon: chevron-down"></span>
                        </button>
                        <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
                        <!--                        <input class="uk-input" type="text" placeholder="100">-->
                    </div>
                </div>
            </div>

            <div class="uk-margin uk-width-1-6@s" style="">
                <label class="uk-form-label" for="form-stacked-select-vhlType">车辆种类</label>
                <div class="uk-form-controls">
                    <select class="uk-select uk-form-large" id="form-stacked-select-vhlType">
                        <option>Option 01</option>
                        <option>Option 02</option>
                    </select>
                </div>
            </div>
<!--            <div class="uk-width-1-2@s">-->
<!--                <input class="uk-input" type="text" placeholder="50">-->
<!--            </div>-->
            <div class="uk-margin uk-width-1-6@s" style="">
                <label class="uk-form-label" for="form-stacked-select-vhlType">URL</label>
                <div class="uk-form-controls">
                    <input class="uk-input" type="text" placeholder="URL" name="pattern">
                </div>
            </div>
            <div class="uk-margin uk-width-1-6@s" style="">
                <label class="uk-form-label" for="form-stacked-select-vhlType">方法名</label>
                <div class="uk-form-controls">
                    <input class="uk-input" type="text" placeholder="方法名" name="methodName">
                </div>
            </div>
            <div class="uk-margin uk-width-1-6@s" style="">
                <label class="uk-form-label" for="form-stacked-select-vhlType">负责人</label>
                <div class="uk-form-controls">
                    <input class="uk-input" type="text" placeholder="负责人" name="">
                </div>
            </div>
        </form>
        <button class="uk-button uk-button-primary uk-width-1-6 uk-margin-small-bottom" onclick="sout()">搜索</button>

        <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink">负责人</th>
                <th class="uk-table-shrink uk-text-nowrap">URL</th>
                <th class="uk-table-shrink uk-text-nowrap">请求方法</th>
                <th class="uk-table-shrink uk-text-nowrap">类名</th>
                <th class="uk-table-shrink uk-text-nowrap">方法名</th>

                <th class="uk-table-shrink uk-text-nowrap">版本</th>
                <th class="uk-table-shrink uk-text-nowrap">链路</th>
                <th class="uk-table-shrink uk-text-nowrap">加密</th>
                <th class="uk-table-shrink uk-text-nowrap">解密</th>
                <th class="uk-table-shrink uk-text-nowrap">数据脱敏</th>

                <th class="uk-table-shrink uk-text-nowrap">操作</th>
            </tr>
            </thead>
            <tbody id="apiInterfacebody"></tbody>
        </table>
    </li>
    <!--缓存管理=================-->
    <li style="margin-left: 10%;margin-right: 10%;">
        <nav class="uk-navbar-container" uk-navbar>
            <form class="uk-search uk-search-navbar uk-search-large" style="width:100%;">
                <span uk-search-icon></span>
                <input class="uk-search-input" type="search" placeholder="Search...">
            </form>
        </nav>
        <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
                <tr>
                    <th class="uk-table-shrink"></th>
                    <th class="uk-table-shrink">负责人</th>
                    <th class="uk-table-shrink uk-text-nowrap">URL</th>
                    <th class="uk-table-shrink uk-text-nowrap">全路径</th>
                    <th class="uk-table-shrink uk-text-nowrap">类名</th>
                    <th class="uk-table-shrink uk-text-nowrap">超时控制</th>
                    <th class="uk-table-shrink uk-text-nowrap">超时时长</th>
                    <th class="uk-table-shrink uk-text-nowrap">超时单位</th>
                    <th class="uk-table-shrink uk-text-nowrap">连接异常抛出</th>
                    <th class="uk-table-shrink uk-text-nowrap">连接异常打印</th>
                    <th class="uk-table-shrink uk-text-nowrap">异常抛出</th>
                    <th class="uk-table-shrink uk-text-nowrap">异常打印</th>

                    <th class="uk-table-shrink uk-text-nowrap">操作</th>
                </tr>
            </thead>
            <tbody id="apiRedisbody"></tbody>
        </table>
    </li>
    <!--ASM管理=================-->
    <li style="margin-left: 10%;margin-right: 10%;">
<!--        <div style="left: 10%;width: 600px;" class="uk-search uk-search-default">-->
<!--            <span uk-search-icon></span>-->
<!--            <input list="condidatesApi" id="searchTextApi" style="border-top: none;border-right: none;border-left: none;border-bottom: 1px solid lightgreen;color:#213121" class="uk-search-input" type="search" placeholder="搜索方法名或者类文件..." oninput="searchTip(event);" onkeydown="searchApis(event);">-->
<!--            <datalist id="condidatesApi" onkeydown="searchApis(event);">-->
<!--                <option value="特殊t"/>-->
<!--                <option value="特殊t2"/>-->
<!--                <option value="特殊t3"/>-->
<!--            </datalist>-->
<!--            <button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-reveal">更多</button>-->
<!--        </div>-->
        <nav class="uk-navbar-container" uk-navbar>
<!--            <div class="uk-navbar-left">-->
<!--                <div class="uk-navbar-item">  -->
                    <form class="uk-search uk-search-navbar uk-search-large" style="width:100%;">
                        <span uk-search-icon></span>
                        <input class="uk-search-input" type="search" placeholder="Search...">
                    </form>
<!--                </div>-->
<!--            </div>-->
        </nav>
        <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink">负责人</th>
                <!--                <th class="uk-table-expand">Expand + Link</th>-->
                <th class="uk-table-shrink uk-text-nowrap">URL</th>
                <!--                <th class="uk-width-small">Truncate</th>-->
                <!--                <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>-->
                <th class="uk-table-shrink uk-text-nowrap">模型类路径</th>
                <th class="uk-table-shrink uk-text-nowrap">模型类名</th>
                <th class="uk-table-shrink uk-text-nowrap">包路径</th>
                <th class="uk-table-shrink uk-text-nowrap">类名</th>
                <th class="uk-table-shrink uk-text-nowrap">类型</th>
                <th class="uk-table-shrink uk-text-nowrap">操作</th>
            </tr>
            </thead>
            <tbody id="apiTbody">
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                </td>
                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                <td class="uk-text-nowrap">Lorem ipsum dolor</td>
            </tr>
            <tr>
                <td><input class="uk-checkbox" type="checkbox"></td>
                <td><img class="uk-preserve-width uk-border-circle" src="http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>
                <td class="uk-table-link">
                    <a class="uk-link-reset" href="">/api/test/test222</a>
                </td>
                <td class="uk-text-truncate">com.yzy.fly.FlyApiController</td>
                <td class="uk-text-nowrap">queryById</td>
                <td class="uk-text-nowrap">
                    <p uk-margin>
                        <button class="uk-button uk-button-primary uk-button-small">开启</button>
                        <button class="uk-button uk-button-danger uk-button-small">关闭</button>
                    </p>
                </td>
            </tr>
            </tbody>
        </table>
    </li>

    <!--业务建模管理=================-->
    <li style="margin-left: 10%;margin-right: 10%;">
        <nav class="uk-navbar-container" uk-navbar>
            <form class="uk-search uk-search-navbar uk-search-large" style="width:100%;">
                <span uk-search-icon></span>
                <input class="uk-search-input" type="search" placeholder="Search...">
            </form>
        </nav>
        <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink">负责人</th>
                <th class="uk-table-shrink uk-text-nowrap">URL</th>
                <th class="uk-table-shrink uk-text-nowrap">路径</th>
                <th class="uk-table-shrink uk-text-nowrap">类名</th>
                <th class="uk-table-shrink uk-text-nowrap">批量执行</th>
                <th class="uk-table-shrink uk-text-nowrap">操作</th>
            </tr>
            </thead>
            <tbody id="apiModelbody"></tbody>
        </table>
    </li>

    <li style="margin-left: 10%;margin-right: 10%;">
        <nav class="uk-navbar-container" uk-navbar>
            <form class="uk-search uk-search-navbar uk-search-large" style="width:100%;">
                <span uk-search-icon></span>
                <input class="uk-search-input" type="search" placeholder="Search...">
            </form>
        </nav>
        <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
            <tr>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink">负责人</th>
                <th class="uk-table-shrink uk-text-nowrap">URL</th>
                <th class="uk-table-shrink uk-text-nowrap">路径</th>
                <th class="uk-table-shrink uk-text-nowrap">类名</th>
                <th class="uk-table-shrink uk-text-nowrap">批量执行</th>
                <th class="uk-table-shrink uk-text-nowrap">操作</th>
            </tr>
            </thead>
            <tbody id="beanBody"></tbody>
        </table>
    </li>
</ul>

<div id="modal-exception" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div id="exception-detail" class="uk-modal-body uk-margin-auto-vertical" uk-overflow-auto>

        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-primary  uk-modal-close" type="button">朕知道了</button>
        </div>

    </div>
</div>

<div id="modal-method" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-1@s uk-flex-middle" uk-grid>
            <div uk-height-viewport>
                <div id="layerDemo" width="1200px" height="900px">
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modal-login" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <div class="uk-grid-collapse uk-child-width-1-1@s uk-flex-middle" uk-grid>
            <div   uk-height-viewport>
                <div class="uk-text-center" uk-grid>
                    <div class="uk-width-1-4@m">
                    </div>
                    <div class="uk-width-2-4@m" style="margin-top: 100px;">
                        <div class="uk-grid-small" uk-grid>
                            <div style="font-size: 35px;" class="uk-width-expand" >KoTime调用链路追踪</div>
                        </div>
                    </div>
                    <div class="uk-width-1-4@m">
                    </div>
                </div>

                <div class="uk-text-center" uk-grid>
                    <div class="uk-width-1-3@m">
                    </div>
                    <div class="uk-width-1-3@m" style="margin-top: 10px;">
                        <form >

                            <div class="uk-margin">
                                <div class="uk-inline">
                                    <span class="uk-form-icon" uk-icon="icon: user"></span>
                                    <input id="userName" class="uk-input" type="text">
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline">
                                    <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
                                    <input id="userPassword" type="password" class="uk-input" >
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline">
                                    <a class="uk-button uk-button-default uk-label-success" onclick="login();"  >确定</a>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="uk-width-1-3@m">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="offcanvas-reveal" uk-offcanvas="mode: reveal; overlay: true; flip: true">
    <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="uk-button uk-button-primary uk-button-small" onclick="apiStartAll()">全部开启</button>
        <button class="uk-button uk-button-danger uk-button-small" onclick="apiShutdownAll()">全部关闭</button>
    </div>
</div>

<!--<div class="uk-margin-medium-bottom" style="position:absolute;top:95%;left:45%;text-align:center;">-->
<!--    <ul class="uk-flex-center" uk-tab>-->
<!--        <li class=""><a style="font-size: 7px;text-transform:capitalize" href="#">@2021 Huoyo</a></li>-->
<!--    </ul>-->
<!--</div>-->
<!-- This is the modal -->

<div id="modal-full" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
            <div class="uk-background-cover" style="background-image: url('/skin/ukv3/images/photo.jpg');" uk-height-viewport></div>
            <div class="uk-padding-large">
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

<div id="modal-example" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
<!--        <button class="uk-modal-close-default" type="button" uk-close></button>-->
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-3@s uk-flex-middle" uk-grid>
<!--            <div class="uk-background-cover" style="background-image: url('/skin/ukv3/images/photo.jpg');" uk-height-viewport></div>-->
            <div class="uk-padding-small uk-width-1-3" uk-height-viewport>
                <h1>Headline</h1>
                <p>2343242</p>
                <div class="uk-panel uk-panel-scrollable" style="height:500px;">
                    <ul class="uk-list">
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
                        <li>
                            <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
                            <ul>
                                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
                                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
                                <li>
                                    <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
                                    <ul>
                                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
                                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
                                    </ul>
                                </li>
                                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
                            </ul>
                        </li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
                    </ul>
                </div>
            </div>

            <div class="uk-padding-small uk-width-expand" uk-height-viewport>
                <h1>Headline</h1>
                <p>2343242</p>
                <div class="uk-panel uk-panel-scrollable" style="height:500px;">
                    <ul class="uk-list">
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
                        <li>
                            <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
                            <ul>
                                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
                                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
                                <li>
                                    <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
                                    <ul>
                                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
                                        <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
                                    </ul>
                                </li>
                                <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
                            </ul>
                        </li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
                        <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
                    </ul>
                </div>
                <div class="uk-overflow-auto">
                    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
                        <thead>
                        <tr>
                            <th class="uk-table-shrink"></th>
                            <th class="uk-table-shrink">Preserve</th>
                            <th class="uk-table-expand">Expand + Link</th>
                            <th class="uk-width-small">Truncate</th>
                            <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        <tr>
                            <td><input class="uk-checkbox" type="checkbox"></td>
                            <td><img class="uk-preserve-width uk-border-circle" src="/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>
                            <td class="uk-table-link">
                                <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>
                            </td>
                            <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>
                            <td class="uk-text-nowrap">Lorem ipsum dolor</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
<!--        <div class="uk-modal-header">-->
<!--            <h2 class="uk-modal-title"></h2>-->
<!--        </div>-->
<!--        <div class="uk-modal-body">-->
<!--            <h2 class="uk-modal-title">Headline</h2>-->
<!--            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>-->
<!--            <p class="uk-text-right">-->
<!--                <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>-->
<!--                <button class="uk-button uk-button-primary" type="button">Save</button>-->
<!--            </p>-->
<!--        </div>-->
    </div>
</div>

<div id="modal-example2" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <!--        <button class="uk-modal-close-default" type="button" uk-close></button>-->
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-3@s uk-flex-middle" uk-grid>
            <!--            <div class="uk-background-cover" style="background-image: url('/skin/ukv3/images/photo.jpg');" uk-height-viewport></div>-->
            <div class="uk-padding-small uk-width-expand" uk-height-viewport>
                <h1>Headline</h1>
                <p>2343242</p>
                <div class="uk-overflow-auto">
                    <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
                        <thead>
                        <tr>
                            <th class="uk-table-shrink"></th>
                            <th class="uk-table-shrink">Preserve</th>
                            <th class="uk-table-expand">Expand + Link</th>
                            <th class="uk-width-small">Truncate</th>
                            <th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
                        </tr>
                        </thead>
                        <tbody id="modelPropertyTableBody">
<!--                            <tr>-->
<!--                                <td><input class="uk-checkbox" type="checkbox"></td>-->
<!--                                <td><img class="uk-preserve-width uk-border-circle" src="/skin/ukv3/images/avatar.jpg" width="40" alt=""></td>-->
<!--                                <td class="uk-table-link">-->
<!--                                    <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a>-->
<!--                                </td>-->
<!--                                <td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td>-->
<!--                                <td class="uk-text-nowrap">Lorem ipsum dolor</td>-->
<!--                            </tr>-->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
$(function(){
    $('#apiInterfaceSearch').on('keypress',function(event){
        if(event.keyCode=='13'){
            // alert('OK');
            let searchtext = $("#apiInterfaceSearch").val();
            UIkit.notification({message: searchtext, status: 'success'});
            var data = {};
            var wheres = new Array();
            let where_pattern = {};
            where_pattern['column'] = 'pattern';
            where_pattern['value'] = searchtext;
            where_pattern['type'] = 'like';
            wheres.push(where_pattern);
            $("#apiInterfacebody").empty();
            $($("#testForm").serializeArray()).each(function () {
                let where = {};
                where['column'] = this.name;
                where['value'] = this.value;
                where['type'] = 'like';
                wheres.push(where);
            });
            data["wheres"] = wheres;
            $.ajax({
                url:'/api/search',
                async:true,
                data: JSON.stringify(data),
                type:"post",
                contentType:"application/json;charset=UTF-8",
                success:function (result) {
                    let html = '';
                    // let data = result.data.records;
                    let data = result.data;
                    for (let i = 0; i < data.length; i++) {
                        let apiItem = data[i];
                        let color = globalThreshold -1 > globalThreshold ? 'danger':'success';
                        let apiId = apiItem.id;
                        let className = apiItem.className;
                        let methodName = apiItem.methodName;
                        let requestMethodDesc = apiItem.requestMethodDesc;
                        let url = apiItem.pattern;
                        let apiVersionEnable = apiItem.apiVersionEnable;
                        let apiListenerEnable = apiItem.apiListenerEnable;
                        let apiEncryptEnable = apiItem.apiEncryptEnable;
                        let apiDecryptEnable = apiItem.apiDecryptEnable;
                        let apiSensitiveEnable = apiItem.apiSensitiveEnable;
                        html += "<tr>";
                        html += "<td><input class=\"uk-checkbox\" type=\"checkbox\"></td>";
                        html += "<td><img class=\"uk-preserve-width uk-border-circle\" src=\"http://getuikit.dev-tang.com/skin/ukv3/images/avatar.jpg\" width=\"40\" alt=\"\"></td>";
                        html += "<td class=\"uk-table-link\">";
                        html += "<a class=\"uk-link-reset\" href=\"\">"+url+"</a>";
                        html += "</td>";
                        html += "<td class=\"uk-text-nowrap\">"+requestMethodDesc+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+className+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+methodName+"</td>";

                        html += "<td class=\"uk-text-nowrap\">"+apiVersionEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiListenerEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiEncryptEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiDecryptEnable+"</td>";
                        html += "<td class=\"uk-text-nowrap\">"+apiSensitiveEnable+"</td>";

                        html += "<td class=\"uk-text-nowrap\">";
                        html += "<p uk-margin>";
                        html += "<button class=\"uk-button uk-button-default uk-margin-small-right\" type=\"button\" uk-toggle=\"target: #modal-example\">编辑</button>";
                        html += "<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"apiStart('"+apiId+"')\">开启</button>";
                        html += "<button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"apiShutdown('"+apiId+"')\">关闭</button>";
                        html += "</p>";
                        html += "</td>";
                        html += "</tr>";
                    };
                    $("#apiInterfacebody").append(html);
                },
                error:function () {
                    let message = '服务问题，请求失败';
                    UIkit.notification({message: message, status: 'success'});
                }
            });
        }
    })
})
</script>
</body>
</html>